<script lang="ts" setup>
import { ref, onMounted } from 'vue';
import { Edit } from '@element-plus/icons-vue';
import { getPage } from '@/api/post';

const postEditRef = ref()

const page_size = ref(5)
const page_number = ref(1)
const total = ref(0)
const posts = ref() // 定义 posts 为响应式引用
const get_posts = async () => {
    const { data } = await getPage(page_number.value, page_size.value)
    posts.value = data.data
    total.value = data.total
}

onMounted(async () => { // 在组件挂载后获取数据
    await get_posts()
})
const currentChange = async (val: number) => {
    const { data } = await getPage(val, page_size.value)
    posts.value = data.data
}
const handleUpdate = async () => {
    await get_posts()
}
</script>
<template>
    <PostBlock v-for="item in posts" :key="item.id" :post="item" />
    <PostEdit ref="postEditRef" @update="handleUpdate" />

    <div class="fixed-bottom-right">
        <el-button type="primary" :icon="Edit" circle @click="postEditRef.open()" />
    </div>
    <el-pagination background layout="prev, pager, next, jumper" @current-change="currentChange" :page-size="page_size"
        :total="total" />
</template>
<style lang="scss" scoped>
.el-drawer {
    .mx-1 {
        font-size: 24px;
        font-family: 'Times New Roman', Times, serif
    }
}

.fixed-bottom-right {
    position: fixed;
    right: 30px;
    bottom: 50px;

    .el-button {
        width: 90px;
        height: 90px;
        font-size: 60px;
    }
}

.el-pagination {
    margin-top: 20px;
    margin-left: 10px;
    justify-content: flex-start;
}
</style>
